<template>
  <md-popup id="popup-container" v-model="value" position="bottom" :has-mask="true" prevent-scroll @hide="cancel">
    <div class="container">
      <div class="upper column">
        <div class="left row between">
          <div class="title">请添加感谢费</div>
          <md-icon name="guanbi" class="guanbi" @click="cancel"></md-icon>
        </div>
        <div class="right">
          <div class="subtitle">感谢费全部归于车主，添加后车主接单更积极</div>
        </div>
      </div>
      <div class="lower row around">
        <div class="reward-item" v-for="(reward,index) in rewards" :key="index" @click="onChange(reward, index)">
          <img :class="selectedIndex==index?'reward-image':'reward-image-active'" :src="reward.img" />
          <div class="reward-text">{{reward.text}}</div>
        </div>
      </div>
      <div class="custom-price" v-show="isOther">
        <md-field>
          <md-input-item
            v-model="typedPrice"
            ref="money-input"
            :error="errorMessage"
            @change="onMoneyChange"
            title="感谢费(元)"
            placeholder="请输入金额1-300的整数"
            align="right"
            type="money"
            is-formative
          ></md-input-item>
        </md-field>
      </div>
      <div class="confirm-box">
        <md-button @click="confirm">确认</md-button>
      </div>
    </div>
  </md-popup>
</template>

<script>
import { Popup, Icon, PopupTitleBar, Button, InputItem, Field } from 'mand-mobile';
import { mapGetters } from 'vuex';
export default {
  name: 'reward-selector',
  components: {
    [Popup.name]: Popup,
    [Icon.name]: Icon,
    [PopupTitleBar.name]: PopupTitleBar,
    [Button.name]: Button,
    [InputItem.name]: InputItem,
    [Field.name]: Field
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    appendTo: {
      default: () => document.body
    }
  },
  data() {
    return {
      price: 5,
      typedPrice: undefined,
      selectedIndex: 0,
      errorMessage: '',
      rewards: [
        {
          img: require('@/assets/imgs/yinliao_icon.png'),
          text: '5元',
          value: 5
        },
        {
          img: require('@/assets/imgs/tianpinjuan_icon.png'),
          text: '10元',
          value: 10
        },
        {
          img: require('@/assets/imgs/szww_icon.png'),
          text: '20元',
          value: 20
        },
        {
          img: require('@/assets/imgs/cake_xz_icon.png'),
          text: '其他金额'
        }
      ],
      isOther: false
    };
  },
  methods: {
    confirm() {
      if (this.errorMessage !== '' && this.isOther) {
        return;
      }
      if (this.isOther) {
        this.price = this.typedPrice;
      }
      this.value = false;
      this.$emit('submit', this.price);
    },
    cancel() {
      this.value = false;
      this.$emit('cancel');
    },
    onChange(reward, index) {
      this.selectedIndex = index;
      if (index === 3) {
        this.isOther = true;
      } else {
        this.isOther = false;
        this.price = reward.value;
      }
    },
    onMoneyChange(name, value) {
      if (value > 300) {
        this.errorMessage = '不能大于300元';
      } else {
        this.errorMessage = '';
      }
      if (value < 1) {
        this.errorMessage = '不能小于1元';
      } else {
        this.errorMessage = '';
      }
    }
  },
  mounted() {
    if (this.appendTo) {
      this.appendTo.appendChild(this.$el);
    }
  },
  beforeDestroy() {
    if (this.appendTo) {
      this.appendTo.removeChild(this.$el);
    }
  }
};
</script>
<style lang="stylus" scoped>
#popup-container {
  .container {
    background-color: #fff;
    box-sizing: border-box;

    .upper {
      padding: 30px;

      .left {
        width: 100%;

        .title {
          font-size: 36px;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          line-height: 36px;
        }

        .guanbi {
          width: 24px;
          height: 24px;
        }
      }

      .subtitle {
        margin-top: 20px;
        font-size: 24px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 26px;
      }
    }

    .lower {
      box-sizing: border-box;
      padding: 30px;

      .reward-item {
        box-sizing: border-box;

        .reward-image {
          width: 100px;
          height: 88px;
        }

        .reward-image-active {
          width: 100px;
          height: 88px;
          -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
          filter: grayscale(100%);
        }

        .reward-text {
          margin-top: 28px;
          font-size: 26px;
          font-weight: 400;
          color: #333333;
          line-height: 26px;
          text-align: center;
        }
      }
    }

    .custom-price {
      box-sizing: border-box;
      color: #333333;
      font-size: 26px;
      padding: 0px 10px;
    }

    .confirm-box {
      box-sizing: border-box;
      padding: 20px;
    }
  }
}
</style>
